<template>
	<nt-container>
		<view class="hisotry">
			<!-- {{ list }} -->
			<u-list
				@scrolltolower="getHistory"
				enableBackToTop
			>
				<view class="hisotry-item">
					<nt-order-detail :orderInfo="orderInfo"></nt-order-detail>
				</view>
				
				<template v-if="list.length">
					<view class="order-item" v-for="(it, index) in list" :key="it.id">
						<view class="order-item__type">
							<view class="order-item__type--label">
								{{it.mtype}}<text class="tag">[{{it.is_type}}单]</text>
							</view>
							<view class="order-item__time">
								{{it.create_time}}
							</view>
						</view>
						<view class="order-item__addr">
							维修师傅：{{it.worker_name}}
						</view>
						<view class="order-item__desc">
							备注信息：{{it.remarks}}
						</view>
						<view class="order-item__remarks" v-if="it.quote.length">
							<view class="order-item__remarks--item cost">
								<view class="order-item__remarks--label cost">总报价</view>
								<view class="order-item__remarks--content cost" style="color:#f00">{{ finalAmount(it.quote) }}</view>
							</view>
							<view class="order-item__remarks--item" v-for="(q,idx) in it.quote" :key="idx">
								<view class="order-item__remarks--label">{{ q.content }}</view>
								<view class="order-item__remarks--content">{{q.price}}</view>
							</view>
						</view>
						<view class="order-item__group">
							<view class="order-item__status">
								{{ it.status_text }}
							</view>
							<view 
								class="order-item__group--btn full" 
								@tap="nav(`/subpackage/order/pages/_id?id=${it.id}`)"
							>查看详情</view>
						</view>
					</view> 
				</template>
				<u-empty icon="http://cdn.uviewui.com/uview/empty/data.png" v-else></u-empty>
			</u-list>
			
		</view>
	</nt-container>
</template>

<script>
import { getHistorylog } from "@/api"
export default {
	data(){
		return {
			orderId: "",
			orderInfo: {},
			list: [],
			page: 1,
			limit: 10,
			isNext: true,
			loading: false
		}
	},
	onLoad(options){
		this.orderId = options.id || ""
		this.getHistory()
	},
	methods: {
		getHistory(){
			if(this.loading || !this.isNext) return;
			this.loading = true
			getHistorylog({
				id: this.orderId,
				page: this.page,
				limit: this.limit
			}).then(res => {
				const { code, data } = res;
				if(code === 1){
					this.orderInfo = data.info;
					this.list = this.list.concat(data.list.data)
					this.page++
					if(this.list.length >= data.list.total){
						this.isNext = false
					}
				}
				this.loading = false
			}).catch(err => {
				this.loading = false
			})
		},
		finalAmount(list){
			return list.reduce((acc, item) => acc += Number(item.price), 0)
		}
	}
}
</script>

<style scoped lang="scss">
@import "../../../../pages/repatriation/index.scss";
.hisotry{
	padding-bottom: 30rpx;
	&-item{
		margin: 20rpx 20rpx 0;
	}
	.order-item{
		margin-bottom: 0;
		&__remarks{
			&--item{
				display:flex;
				align-items: center;
				justify-content: space-between;
				padding: 5rpx 0;
				&.cost{
					padding-bottom: 20rpx;
					border-bottom: 1rpx solid #fff;
					margin-top: 0;
				}
			}
			&--label{
				width: auto;
				color:#999;
				font-weight: normal;
				&.cost{
					color:#666;
					font-weight: bold;
				}
			}
			&--content{
				flex: none;
			}
		}
		&__desc{
			color:#666;
			font-size: 26rpx;
			margin-bottom: 20rpx;
		}
	}
}
</style>